<template>
  <div id="app">
    <a-menu
      style="width: 256px"
      :default-selected-keys="['0']"
      :open-keys.sync="openKeys"
      mode="inline"
      @click="handleClick">
      <a-menu-item key="0">
        <router-link to="/">
          <a-icon type="home" />
          <span>Home</span>
        </router-link>
      </a-menu-item>
      <a-sub-menu key="sub1">
        <span slot="title"><a-icon type="mail" />微前端</span>
        <a-menu-item key="1">
          <router-link to="/qes-vue3/#/home/index">ChildHome</router-link>
        </a-menu-item>
        <a-menu-item key="2">
          <router-link to="/qes-vue3/#/ctq">CTQ</router-link>
        </a-menu-item>
        <a-menu-item key="3">
          <router-link to="/qes-vue3/#/page2">4C</router-link>
        </a-menu-item>
      </a-sub-menu>
      <a-menu-item key="4">
        <router-link to="/qes-vite/#/admin/usage">
          <a-icon type="pie-chart" />
          <span>usage</span>
        </router-link>
      </a-menu-item>
    </a-menu>
    <router-view></router-view>
  </div>
</template>

<script>
import microApp, { getActiveApps } from '@micro-zoe/micro-app'
import config from './config'

export default {
  name: 'App',
  data () {
    return {
      openKeys: ['sub1']
    }
  },
  methods: {
    handleClick () {

    }
  }
}
</script>

<style>
body {
  margin: 0;
}

#app {
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  text-align: center;
}

#router-container {
  flex: 1;
}

#public-links {
  padding: 10px 0;
}

#public-links a {
  text-decoration: underline;
  color: -webkit-link;
  cursor: pointer;
}

#public-links a:active {
  color: #f53f3f;
}
</style>
